@extends('common.base-master')

@section('html-head')
    <link rel="stylesheet" type="text/css" href="{{url('slick/slick.css')}}"/>
    <script src="{{url('js/mui.min.js')}}"></script>
    <script type="text/javascript" src="{{url('js/hmt.js')}}" ></script>
    <script src="{{url('slick/slick.js')}}" type="text/javascript" ></script>
    <script type="text/javascript" src="{{url('js/shopcar.js')}}" ></script>
    <!--插件-->
    <link rel="stylesheet" href="{{url('css/swiper.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{url('css/common.css')}}"/>

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{url('/css/main.css')}}">
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
@endsection

@section('html-body')
<div id="body">
    <header class="mui-bar mui-bar-nav report-header box-s" id="header" style="background-color: #49cabf">
        <a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui fl"></i></a>
        <p style="width: 90%;">在线预约</p>
        {{--<span class="fr baocun"><a href="#" id="btn_save">保存</a></span>--}}
    </header>
    {{--<div class="page-header" >--}}
        {{--<h4 style="text-align: center;line-height: 1">在线预约</h4>--}}
    {{--</div>--}}
    <!-- 医生列表 -->
    <div id="doctor-list" style="margin-top: 65px;">
        @foreach($doctors as $doctor)
        <div class="full-row-list">
            <div class="list-group">
                <div class="img-wrapper">
                    <img title="医生图" src="{{route('Api.Image.ShowPX',[$doctor->doc_img,'100px'])}}">
                </div>
                <div class="info-wrapper">
                    <p>{{$doctor->doc_name}}</p>
                    <p>{{$doctor->station}}</p>
                    <hr>
                    <p class="cost">擅长领域：<span class="blod">{{$doctor->subject}}</span></p>
                    <p class="cost">预约数量：<span class="num">{{$doctor->bespoke_count}}</span>次</p>
                </div>
                <div class="extra-info" style="margin-right: 5px;margin-bottom: 1px">
                    <span><a href="{{route('M.Home.bespeak',$doctor->id)}}">预约</a></span>
                </div>
            </div>
        </div>
        @endforeach
    </div>

</div>
<div id="more" style="height: 45px;">
    @if($doctors && count($doctors)>=10)
        <button  id="more-btn" style="width: 100%;height: 100%;border-width: 0;background-color: #CCFFCC"><h5>点击加载更多</h5></button>
    @endif
</div>
<script>
    var page = 0;

    $('#more-btn').click(function () {
        page ++;
        var imgUrl = "{{url('/api/image')}}";
        var detailUrl = "{{url('m/bespeak')}}";
        $.get('/api/append-doctors/' + page, function (data, res) {
            for (var i = 0;i< data.data['count'] ;i++){

                $('#doctor-list').append('<div class="full-row-list">'+
                        '<div class="list-group">'+
                        '<div class="img-wrapper">'+
                        '<img title="医生图" src="'+imgUrl+'/'+data.data['data'][i].doc_img+'/show/100px">'+
                        '</div>'+
                        '<div class="info-wrapper">'+
                        '<p >' + data.data['data'][i].doc_name + '</p>'+
                        '<p>'+data.data['data'][i].station+'</p>'+
                        '<p class="cost">擅长领域：<span class="blod">'+data.data['data'][i].subject+'</span></p>'+
                        '<p class="cost">预约数量：<span class="num">'+data.data['data'][i].bespoke_count+'</span>次</p>'+
                        '</div>'+
                        '<div class="extra-info" style="margin-right: 5px;margin-bottom: 1px">'+
                        '<span><a  class="fui-icon-col external" href="'+detailUrl+'/'+data.data['data'][i].id+'" >'+
                        '预约</a></span>'+ ' </div> </div> </div>');
            }
            if (data.data['count']<10){
                $('#more-btn').text('没有更多了哟');
                $('#more-btn').css('background-color','#CCCCCC');
                $('#more-btn').attr('disabled',true);
            }
        });

    });
</script>

@endsection